<script lang="ts" setup>
// 组件无需未用依赖
import { useCartStore } from '@/stores/cart'
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input1 = ref('')
const cartStore = useCartStore()
const centerDialogVisible = ref(false)
// 计算总价
const total = computed(() => cartStore.getTotal)

// 删除商品
const handleDelete = (index) => {
  cartStore.removeFromCart(index)
}

// 修改数量
const handleQuantityChange = (index, newQuantity) => {
  cartStore.updateQuantity(index, newQuantity)
}

// 获取购物车数据
const tableData = computed(() => {
  return cartStore.getCart.map((item) => ({
    ...item,
    sum: item.price * item.quantity,
  }))
})
</script>

<template>
  <div class="cart-page">
    <div class="cart-page-navbar">
      <div class="cart-page-navbar-wrapper">
        <h1 class="cart-page-navbar-title-left">购物车</h1>
        <h1 class="cart-page-navbar-title-right">
          <router-link to="/">首页</router-link>
        </h1>
      </div>
      <div class="cart-page-navbar-divider"></div>
    </div>
    <div class="cart-page-main">
      <div class="cart-page-main-list">
        <div class="cart-page-main-list-title">
          <div class="cart-page-main-list-title-vice">购物车</div>
          <el-input
            v-model="input1"
            style="width: 240px"
            size="large"
            placeholder="搜索购物车内商品"
            :prefix-icon="Search"
          />
        </div>
        <el-table :data="tableData" style="width: 92%; margin: 0 auto">
          <el-table-column type="selection" width="55" />
          <el-table-column label="商品" width="200">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <img :src="scope.row.image" style="width: 50px; height: 50px; margin-right: 10px" />
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="150">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.quantity"
                :min="1"
                :max="10"
                @change="(val) => handleQuantityChange(scope.$index, val)"
                size="small"
                style="width: 80px"
              />
            </template>
          </el-table-column>
          <el-table-column label="单价" width="100">
            <template #default="scope">￥{{ scope.row.price }}</template>
          </el-table-column>
          <el-table-column label="小计" width="100">
            <template #default="scope">￥{{ scope.row.sum.toFixed(2) }}</template>
          </el-table-column>
          <el-table-column align="right">
            <template #default="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="cart-page-main-list-commodity"></div>
      </div>
      <div class="cart-page-main-account">
        <div class="cart-page-main-account-title">订单总汇</div>
        <div class="cart-page-main-account-divider"></div>
        <div class="cart-page-main-account-item">
          <div class="cart-page-main-account-item-number">
            <div class="cart-page-main-account-item-number-title">商品总数</div>
            <div class="cart-page-main-account-item-number-value">{{ tableData.length }}</div>
          </div>
          <div class="cart-page-main-account-item-freight">
            <div class="cart-page-main-account-item-freight-title">运费</div>
            <div class="cart-page-main-account-item-freight-value">￥0</div>
          </div>
          <div class="cart-page-main-account-item-coupon">
            <div class="cart-page-main-account-item-freight-title">折扣卷</div>
            <el-input
              v-model="input1"
              input-style=""
              size="large"
              placeholder="XXXX-XXXX-XXXX-XXXX"
            />
            <el-button type="primary" @click="centerDialogVisible = true">核销</el-button>
            <el-dialog v-model="centerDialogVisible" title="提示" width="500" align-center>
              <span>已核销折扣卷</span>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">确认</el-button>
                  <el-button type="primary" @click="centerDialogVisible = false"> 关闭 </el-button>
                </div>
              </template>
            </el-dialog>
          </div>
          <div class="cart-page-main-account-item-discount">
            <div class="cart-page-main-account-item-discount-title">折扣</div>
            <div class="cart-page-main-account-item-discount-value">{{ 0 }}</div>
          </div>
          <div class="cart-page-main-account-item-number-sum">
            <div class="cart-page-main-account-item-number-sum-title">合计</div>
            <div class="cart-page-main-account-item-number-sum-value">￥{{ total.toFixed(2) }}</div>
          </div>
        </div>
        <router-link to="/pay">
          <button class="cart-page-main-account-button" @click="AddMessage">支付订单</button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cart-page {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: #f7f7f7;

  .cart-page-navbar {
    width: 100%;
    padding: 20px 0;
    .cart-page-navbar-wrapper {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
    .cart-page-navbar-title-left,
    .cart-page-navbar-title-right {
      font-size: 24px;
      font-weight: 600;
      color: #222;
    }
    .cart-page-navbar-title-right a {
      color: #222;
      text-decoration: none;
      transition: color 0.2s;
      font-size: 24px;
      font-weight: 600;
      &:hover {
        color: #ff9800;
        background: #f7f7f7;
      }
    }
    .cart-page-navbar-divider {
      width: 80%;
      height: 1px;
      background-color: #e0e0e0;
      margin: 20px auto;
      border: none;
    }
  }

  .cart-page-main {
    width: 80%;
    height: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .cart-page-main-list {
      :deep(.el-table) {
        height: 150px;
      }
      :deep(.el-button--small) {
        height: 35px;
        width: 100px;
        font-size: 18px;
        border-radius: 8px;
        font-family: 'Courier New', Courier, monospace;
        font-weight: 550;
      }
      width: 68%;
      height: 500px;
      background: #fff;
      border-radius: 20px;
      .cart-page-main-list-title {
        width: 95%;
        display: flex;
        justify-content: space-between;
        .cart-page-main-list-title-vice {
          font-size: 30px;
          font-family: 'Courier New', Courier, monospace;
          font-weight: 550;
          padding: 45px 0 30px 35px;
        }
        :deep(.el-input__wrapper) {
          height: 45px;
          width: 700px;
          border-radius: 10px;
          margin-top: 40px;
          background: #f7f7f7;
          font-size: 16px;
        }
      }
      .cart-page-main-list-divider {
        width: 93%;
        height: 1px;
        background-color: #e0e0e0;
        margin: 20px auto;
        border: none;
      }
      .cart-page-main-list-item {
        width: 90%;
        display: flex;
        padding: 0 0 0 35px;
        font-size: 20px;
        font-family: 'Courier New', Courier, monospace;
        color: #888888;
        justify-content: space-between;
        .cart-page-main-list-item-title-left {
          margin-right: 250px;
        }
      }
    }
    .cart-page-main-account {
      width: 30%;
      height: 700px;
      background: #fff;
      border-radius: 20px;
      .cart-page-main-account-title {
        font-size: 30px;
        font-family: 'Courier New', Courier, monospace;
        font-weight: 550;
        padding: 45px 0 30px 35px;
      }
      .cart-page-main-account-divider {
        width: 80%;
        height: 1px;
        background-color: #e0e0e0;
        margin: 20px auto;
        border: none;
      }
      .cart-page-main-account-item {
        font-size: 20px;
        font-weight: 550;
        font-family: 'Courier New', Courier, monospace;
        margin-left: 35px;
        margin-bottom: 35px;
        .cart-page-main-account-item-number,
        .cart-page-main-account-item-freight,
        .cart-page-main-account-item-discount,
        .cart-page-main-account-item-number-sum {
          display: flex;
          justify-content: space-between;
          padding: 0 30px 35px 0;
        }

        .cart-page-main-account-item-coupon {
          justify-content: space-between;
          padding: 0 30px 35px 0;

          :deep(.el-input__wrapper) {
            border-radius: 13px;
            height: 50px;
            margin-top: 10px;
            font-size: 20px;
            border-color: #f7f7f7;
            background: #f7f7f7;
            border: 0;
            outline: none;
            font-weight: 550;
            color: #444;
          }
          :deep(.el-button) {
            margin-top: 20px;
            width: 80px;
            height: 40px;
            border-radius: 8px;
            font-size: 17px;
            font-weight: 600px;
          }
        }
      }
      .cart-page-main-account-button {
        margin-left: 40px;
        width: 80%;
        height: 50px;
        font-size: 20px;
        font-weight: 600;
        font-family: 'Courier New', Courier, monospace;
        background: #1aad19;
        color: #fff;
        border: 0cap;
        border-radius: 8px;
        &:hover {
          background: #ff9800;
          cursor: pointer;
          transition: background 0.2s;
        }
      }
    }
  }
}
</style>
